/*
 * @Title: 
 * @Created by: ycq
 */

<template>
	<view class="spot-audio">
		<view class="mask" v-show="showMask" @click="maskBtn()"></view>
		<view class='home-search' style="top: 0px;">
			<HeaderNavInput :config="navConfig" :focusHandle="focusHandle" :rightTapHandle3 ="openScreen"  />
			<AudioScreen v-if="showAuScreen"></AudioScreen>
		</view>
		<image class="audio-bg" src="/static/linshi/yy-shenyanggugong.png"  @click="showFx=false;showAuScreen=false" mode=""></image>
		<view class="spot-info">
			<view class="spot-head">
				<image src="/static/audio/audio-pos.png" mode=""></image>
				<text>沈阳故宫</text>
			</view>
			<text class="info-des">不知道题主是在现在这个季节要来 沈阳玩么？沈阳本身不是什么旅游 城市，旅游资源比较匮乏，现在这 个季节又是天寒地冻...</text>
		</view>
		<view class="spot-btns">
			<image v-if="!isZan" src="/static/audio/zan.png" mode=""></image>
			<image v-if="isZan" src="/static/audio/zan-in.png" mode=""></image>
			<image v-if="!isMore" src="/static/audio/more.png" mode="" @click="showPlBtn()"></image>
			<image v-if="isMore" src="/static/audio/more-in.png" mode="" @click="showPlBtn()"></image>
			<image v-if="!isColl" src="/static/audio/coll.png" mode=""></image>
			<image v-if="isColl" src="/static/audio/coll-in.png" mode=""></image>
			<image v-if="!isZf" src="/static/audio/zf.png"  @click="togglePopup('bottom','share')" mode=""></image>
			<image v-if="isZf" src="/static/audio/zf-in.png"   @click="togglePopup('bottom','share')" mode=""></image>
		</view>
		<view class="nav">
			<view class="nav-item">
				<text :class="navIndex==0?'nav-ac':''">首页</text>
			</view>
			<view class="nav-item" @click="toColl()" >
				<text :class="navIndex==1?'nav-ac':''">我的收藏</text>
			</view>
		</view>
		<!-- <view v-if="showFx" class="fenxiang">
			<text class="fenxiang-label">分享到</text>
			<view class="fenxiang-list">
				<view class="fenxiang-item" v-for="(item,index) in fxData" :key='index'>
					<image :src="item.img" mode="aspectFit"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view> -->
		<view class="pl" v-if="showPl">
			<view class="pl-head">
				<text>评论(26)</text>
				<view class="pl-close" @click="showPlBtn()">
					<image src="/static/close.png" mode=""></image>
				</view>
			</view>
			<view class="pl-list">
				<view class="pl-item" v-for="(item,index) in plData" :key='index'>
					<view class="pl-main" > 
						<image class="pl-user" :src="item.userHead" mode=""></image>
						<view class="pl-item-mid">
							<view class="pl-user-info">
								<text>{{item.userName}}</text>
								<view class="user-type" v-if="item.userType==1">作者</view>
							</view>
							<text class="pl-text">{{item.text}}</text>
						</view>
						<view class="pl-item-right">
							<image class="pl-zan" src="/static/glZan1.png" mode=""></image>
							<text class="pl-zan-num">{{item.zanNum}}</text>
						</view>
					</view>
					<view class="pl-hf" v-for="(hfItem,HfIndex) in item.hfData" :key='HfIndex'>
						<image class="pl-user-s" :src="hfItem.userHead" mode=""></image>
						<view class="pl-item-mid">
							<view class="pl-user-info">
								<text>{{hfItem.userName}}</text>
								<view class="user-type" v-if="hfItem.userType==1">作者</view>
							</view>
							<text class="pl-text-s" >{{hfItem.text}}</text>
						</view>
						<view class="pl-item-right">
							<image class="pl-zan" src="/static/glZan1.png" mode=""></image>
							<text class="pl-zan-num">{{hfItem.zanNum}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="pl-bottom">
				<view class="pl-box">
					<image src="/static/pl.png" mode=""></image>
					<input type="text" placeholder="请输入评论...">
				</view>
				<view class="fabu" @click="showPlBtn()">发布</view>
			</view>
		</view>
		<!-- 分享弹窗 -->
		<uni-popup ref="share" :type="type" :custom="true">
			<view class="uni-share">
				<view class="uni-share-title">分享到</view>
				<view class="uni-share-content">
					<view v-for="(item, index) in bottomData" :key="index" class="uni-share-content-box">
						<view class="uni-share-content-image">
							<image :src="item.icon" class="image" />
						</view>
						<view class="uni-share-content-text">{{ item.text }}</view>
					</view>
				</view>
				<view class="uni-share-btn"  @click="cancel('share')">取消分享</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import AudioScreen from '@/components/AudioScreen.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default{
		data(){
			return{
				navIndex:0,
				showAuScreen:false,
				showFx:false,
				isZan:true,
				isMore:true,
				isColl:true,
				isZf:false,
				showPl:false,
				showMask:false,
				plData:[
					{
						userName:'硕大的电商',
						userHead:'/static/banner.png',
						userType:0,
						text:'这个景区很好玩哦~ 计划明年再去',
						zanNum:265,
						zaned:false,
						hfData:[]
					},
					{
						userName:'美丽的噩梦',
						userHead:'/static/banner.png',
						userType:0,
						text:'很早就有朋友推荐，不错的地方，有机会一定去看看。',
						zanNum:265,
						zaned:false,
						hfData:[
							{
								userName:'恭喜发财',
								userHead:'/static/banner.png',
								userType:1,
								text:'是呀是呀，真的很不错~是呀是呀，真的很不错~是呀是呀，真的很不错~是呀是呀，真的很不错~是呀是呀，真的很不错~',
								zanNum:255,
								zaned:false,
							},
							{
								userName:'早生贵子',
								userHead:'/static/banner.png',
								userType:0,
								text:'是呀是呀，真的很不错~',
								zanNum:255,
								zaned:false,
							}
						]
					},
					{
						userName:'硕大的电商',
						userHead:'/static/banner.png',
						userType:0,
						text:'这个景区很好玩哦~ 计划明年再去',
						zanNum:265,
						zaned:false,
						hfData:[]
					},
					{
						userName:'硕大的电商',
						userHead:'/static/banner.png',
						userType:0,
						text:'这个景区很好玩哦~ 计划明年再去',
						zanNum:265,
						zaned:false,
						hfData:[]
					},
				],
				fxData:[
					{
						img:'/static/audio/fx-download.png',
						name:'下载'
					},
					{
						img:'/static/audio/fx-wx.png',
						name:'微信'
					},
					{
						img:'/static/audio/fx-friend.png',
						name:'朋友圈'
					},
					{
						img:'/static/audio/fx-qq.png',
						name:'QQ'
					},
					{
						img:'/static/audio/fx-qqzone.png',
						name:'QQ空间'
					}
				],
				type: '',//uniPopup组件类型
				bottomData: [
					{
						text: '微信',
						icon: '/static/audio/fx-wx.png',
						name: 'wx'
					},
					{
						text: '朋友圈',
						icon: '/static/audio/fx-friend.png',
						name: 'pyq'
					},
					{
						text: 'QQ',
						icon: '/static/audio/fx-qq.png',
						name: 'qq'
					},
					{
						text: 'QQ空间',
						icon: '/static/audio/fx-qqzone.png',
						name: 'qqkj'
					}
					
				],
				navConfig: {
					left:{
						leftExist:true,
						ifleftGoback:true,
						leftGobackColor:'#ffffff',
						leftGoback:'arrowleft',
						localPosition:'沈阳',
						leftIcon:'/static/pos-home.png',
						leftGobackColor:'#ffffff'
					},
					mid:{
						ifSearch:true,
						placeText:'请输入搜索内容',
						isOpacity:0.5
					},
					right:{
						rightExist:false,
						rightIcon1:'',
						rightIcon2:'',
						rightIconName1:'',
						rightIconName2:'',
						ifrightIcon2:false,
						ifrightIcon1:false,
					},
					row:{
						isShowRightRow:true, //是否显示右侧图标文字横排
						rowText:'筛选',//文字内容
						rowIco:'arrowdown',//icon
						rowTextColor:'#ffffff',//文字颜色
						rowIcoColor:'#ffffff'//icon颜色
					}
					
				},
			}
		},
		methods: {
			chooseNav(index){
				this.navIndex = index
			},
			toColl(){
				uni.navigateTo({
					url:'spotAudioColl'
				})
			},
			toMore(){
				uni.navigateTo({
					url:'spotAudioMore'
				})
			},
			openScreen(){

				//#ifdef APP-PLUS|| MP-WEIXIN
				var that = this.$parent;
				that.showAuScreen = !that.showAuScreen
				that.showPl = false
				//#endif
				//#ifndef APP-PLUS|| MP-WEIXIN
				this.showAuScreen = !this.showAuScreen
				
				this.showAuScr = !this.showAuScr
				// #ifndef H5 
				var that = this.$parent;
				
				that.showAuScr = !that.showAuScr
				that.showPl = false
				// #endif
				
				this.showAuScr = !this.showAuScr
				this.showPl = false
				//#endif
				
			},
			focusHandle(){
				uni.navigateTo({
					url:'/pages/home/shearchView',
					animationType:'slide-in-bottom',
				})
			},
			showPlBtn(){
				this.showPl = !this.showPl
				this.showAuScreen = false
				this.showMask = !this.showMask
			},
			maskBtn(){
				this.showPl = false
				this.showMask = false
				this.showAuScreen = false
			},
			togglePopup(type,open){
				this.type = type;
				this.$refs[open].open()
				this.showFx = true
				document.body.style.overflow = 'hidden'
			},
			cancel(type) {
				this.showFx = false
				this.$refs[type].close()
				document.body.style.overflow = 'scroll'
			},
		},
		watch: {
			showPl(newValue) {
				if(newValue){
					this.showMask = true
				}else{
					this.showMask = false
				}
			},
			
		},
		created(){
			
		},
		components: {
			AudioScreen,
			uniPopup
		},
	}
</script>

<style scoped>
	/* 底部分享 */
	.uni-share {
		background: #fff;
	}
	
	.uni-share-title {
		line-height: 60upx;
		font-size: 24upx;
		padding: 15upx 0;
		text-align: center;
	}
	
	.uni-share-content {
		display: flex;
		flex-wrap: wrap;
		padding: 15px;
	}
	
	.uni-share-content-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		box-sizing: border-box;
	}
	
	.uni-share-content-image {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60upx;
		height: 60upx;
		overflow: hidden;
		border-radius: 10upx;
	}
	
	.uni-share-content-image .image {
		width: 100%;
		height: 100%;
	}
	
	.uni-share-content-text {
		font-size: 26upx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}
	
	.uni-share-btn {
		height: 90upx;
		line-height: 90upx;
		border-top: 1px #f5f5f5 solid;
		text-align: center;
		font-size: 30upx;
		color: #666;
	}
	.uni-status-bar {
		display: block;
		width: 100%;
		height: var(--status-bar-height);
		/* border:1upx solid blue */
	}
	.mask{
		width: 750upx;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: 20;
		bottom: 0;
	}
	/* 分享 */
	.fenxiang{
		width: 750upx;
		height: 260upx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		border-radius: 30upx 30upx 0 0 ;
	}
	.fenxiang-label{
		width: 750upx;
		height: 60upx;
		display: block;
		text-align: center;
		font-size: 36upx;
		margin-top: 20upx;
	}
	.fenxiang-list{
		width: 650upx;
		height: 124upx;
		margin-top: 20upx;
		margin-left: 50upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.fenxiang-item{
		width: 100upx;
		height: 124upx;
		position: relative;
		text-align: center;
	}
	.fenxiang-item image{
		width: 66upx;
		height: 66upx;
	}
	.fenxiang-item text{
		width: 100upx;
		display: block;
		height: 30upx;
		font-size: 26upx;
		position: absolute;
		
		bottom: 0;
	}
	
	
	.spot-audio{
		width: 750upx;
		height: 100vh;
	}
	.audio-bg{
		width: 750upx;
		height: 100vh;
		position: absolute;
	}
	.home-search{
		width: 750upx;
		height: 80upx;
		position: absolute;
		top: 67upx;
		display: flex;
		z-index: 20;
		flex-direction: row;
	}
	.spot-info{
		width: 362upx;
		height: auto;
		position: absolute;
		top:60%;
		left:30upx;
	}
	.spot-head{
		width: 362upx;
		height: 84upx;
	}
	
	.spot-head image{
		width: 80upx;
		height: 80upx;
		float: left;
	}
	.spot-head text{
		font-size: 28upx;
		color: #FFFFFF;
		line-height: 84upx;
		float: left;
		
	}
	.info-des{
		font-size: 28upx;
		color: #FFFFFF;
		margin-top: 30upx;
	}
	.spot-btns{
		position: absolute;
		right: 32upx;
		top: 58%;
		width: 58upx;
		z-index: 21;
		text-align: center;
		display: flex;
		flex-direction: column;
	}
	.spot-btns image{
		margin-bottom: 50upx;
		width: 58upx;
		height: 53upx;
	}
	.nav{
		width: 750upx;
		height: 80upx;
		position: absolute;
		bottom: 22upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.nav-item{
		width: 150upx;
		height: 40upx;
		text-align: center;
	}
	.nav-item text{
		font-size: 28upx;
		height: 40upx;
		color: #FFFFFF;
		line-height: 40upx;
	}
	.nav-ac{
		font-size: 30upx !important;
		font-weight: bold;
		border-bottom: #FFFFFF solid 4upx;
	}
	
	/* 评论 */
	.pl{
		width: 750upx;
		height: 850upx;
		position: fixed;
		z-index: 31;
		bottom: 0upx;
		padding-bottom: 98upx;
		border-radius: 30upx 30upx 0 0 ;
		background: #FFFFFF;
		box-shadow: 0px 0px 16px 0px rgba(205,205,205,1);
	}
	.pl-head{
		width: 750upx;
		height: 99upx;
		border-radius: 30upx 30upx 0 0 ;
		background: rgba(249,249,249,1.00);
	}
	.pl-head text{
		width: 100%;
		height: 99upx;
		font-size: 30upx;
		line-height: 99upx;
		text-align: center;
		position: absolute;
		z-index: 1;
		display: block;
	}
	.pl-close{
		width: 99upx;
		height: 99upx;
		position: absolute;
		z-index: 2;
		right: 0;
		vertical-align: middle;
		text-align: center;
	}
	.pl-close image{
		width: 20px;
		height: 20px;
		margin-top: 30upx;
	}
	.pl-list{
		width: 750upx;
		height: 750upx;
		overflow-y: scroll;
	}
	.pl-item{
		width: 750upx;
		height: auto;
		margin: 46upx 0;
	}
	.pl-main{
		width: 750upx;
		height: auto;
		display: table;
	}
	.pl-user{
		width: 60upx;
		height: 60upx;
		border-radius: 50%;
		float: left;
		margin-left: 28upx;
		margin-right: 18upx;
	}
	.pl-user-s{
		width: 36upx;
		height: 36upx;
		border-radius: 50%;
		float: left;
		margin-right: 12upx;
	}
	.pl-item-mid{
		width: 70%;
		height: auto;
		display: table;
		float: left;
	}
	.pl-user-info{
		width: 100%;
		height: 40upx;
	}
	.pl-user-info text{
		font-size: 24upx;
		/* line-height: 30upx; */
		color: rgba(159,159,159,1.00);
		float: left;
		
	}
	.user-type{
		width: 56upx;
		height: 24upx;
		padding: 4upx 10upx;
		font-size: 22upx;
		transform: scale(0.80);
		background: rgba(101,163,255,1.00);
		color: #FFFFFF;
		text-align: center;
		float: left;
		line-height: 24upx;
		border-radius: 20upx 20upx 20upx 0;
		margin-left: 14upx;
		margin-top: 2upx;
	}
	.pl-text{
		width: 100%;
		display: table;
		height: auto;
		font-size: 26upx;
	}
	.pl-text-s{
		width: 470upx;
		display: table;
		height: auto;
		font-size: 26upx;
	}
	.pl-item-right{
		width: 100upx;
		height: 100upx;
		float: right;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.pl-zan{
		width: 28upx;
		height: 26upx;
		margin-left: 36upx;
	}
	.pl-zan-num{
		width: 100upx;
		display: block;
		text-align: center;
		font-size: 24upx;
		color: rgba(176,176,176,1.00);
	}
	.pl-hf{
		width: 644upx;
		margin-top: 50upx;
		height: auto;
		display: table;
		margin-left: 106upx;
	}
	
	.pl-bottom{
		width: 750upx;
		height: 98upx;
		box-shadow: 0px 0px 10px 0px rgba(234,234,234,1);
		position: absolute;
		bottom: 0;
	}
	.pl-box{
		width: 588upx;
		height: 64upx;
		margin-top: 17upx;
		margin-left: 26upx;
		background: rgba(246,246,246,1.00);
		border-radius: 30upx ;
		float: left;
	}
	.pl-box image{
		float: left;
		width: 36upx;
		height: 36upx;
		margin-left: 23upx;
		margin-top: 14upx;
	}
	.pl-box input{
		width: 460upx;
		height: 64upx;
		margin-left: 18upx;
		line-height: 64upx;
		font-size: 28upx;
		float: left;
	}
	.fabu{
		width: 128upx;
		height: 98upx;
		float: right;
		font-size: 32upx;
		text-align: center;
		line-height: 98upx;
	}
</style>
